<template>
  <div class="contract_container">
    <div class="title">
      <img src="../../assets/common/r_title_2.png" alt="">
    </div>
    <swiper ref="pie_swiper" :options="swiperOption" class="pie_swiper_container" @change="aaa(i)">

      <swiper-slide class="swiper-slide">
        <div class="chart">
          <pie-first />
        </div>
      </swiper-slide>

      <swiper-slide class="swiper-slide">
        <div class="chart">
          <pie-second />
        </div>
      </swiper-slide>
<!--      <swiper-slide class="swiper-slide">-->
<!--        00-->
<!--      </swiper-slide>-->
<!--      <swiper-slide class="swiper-slide">-->
<!--        01-->
<!--      </swiper-slide>-->

      <div slot="pagination" class="swiper-pagination" />
    </swiper>

  </div>
</template>

<script>
import PieFirst from '../ContractCondition/pie_first.vue'
import PieSecond from '../ContractCondition/pie_second.vue'
export default {
  components: {
    PieFirst,
    PieSecond
  },
  data() {
    return {
      swiperOption: {
        direction: 'horizontal',
        loop: true,
        pagination: {
          el: '.swiper-pagination'
        }
      }

    }
  },

  computed: {
    swiper() {
      return this.$refs.pie_swiper.$swiper
    }
  },

  methods: {

  }

}
</script>

<style lang="less" scoped>
.contract_container{
    height: 404px;
    background: url('../../assets/common/r_item_2.png') no-repeat;
    background-size: 100%;
    .title{
      padding: 18px 0 14px 34px;
    }
    .pie_swiper_container{
        width: 100%;
        height: 350px;
        .chart{
          width: 100%;
          height: 100%;
        }
    }
}

/deep/.swiper-pagination-bullet-active {
  background: #1FFCE5 !important;
}
/deep/.swiper-pagination-bullet {
    width: 10px;
    height: 3px;
    border-radius: 0%;
    display: inline-block;
    background: #092B43;
    opacity: 1;
}

/deep/.swiper-wrapper{
  transition-duration: 0ms;
  transform: translate3d(-444px, 0px, 0px);
}

</style>
